<template>
<div>
  <div class="redTltle">
    <van-row>
      <van-col span="2"><van-icon name="arrow-left" @click="routerBack" /></van-col>
      <van-col span="5"  offset="8"><div class="redTltle">专家学者</div></van-col>
    </van-row>
  </div>
  <div class="top1box">
   <div class="imgPeople">
     <van-image
         round
         width="2.69rem"
         height="2.69rem"
     :src="this.img"/>
     <div class="peopleName">{{PeopleListImg.name}}</div>
<!--     />-->
   </div>

  </div>
  <div class="lion"></div>
  <div class="top2">
    <div class="top2Title">
     专家介绍
    </div>
    <div class="top2bottomText">
      <div class="top2bottomText1"  v-html="model"></div>
    </div>
  </div>
  <div class="lion"></div>
  <div class="top3">
    <div class="top3Title">相关文献</div>
    <div v-for="(item,index) in XgWxList" class="top3Text" @click="torouter(item)">
      {{item.title}}
    </div>
  </div>
</div>
</template>

<script>
import {GetExpert,GetExpertPicture,GetDocument} from '@/api/journalApi/expertPeopleApi'
export default {
  name: "expertPeople",
  data(){
    return{
      XgWxList:'',
      PeopleListImg:'',
      model:'',
      ids:'',
      img:[],
      name:'',
    }
  },
  created() {
    this.ids = this.$route.query.ids
    this.name = this.$route.query.name
    this.img =  this.$route.query.img
    GetExpert({id:this.ids})
        .then(res=>{
          this.model = res.data.data.text
          this.PeopleListImg=res.data.data
         // console.log(this.PeopleListImg)
        })
    GetDocument({
          "author": this.name,
          "page": 1,
          "pageSize": 5,
        }
    )
        .then(res => {
          this.XgWxList= res.data.data.list
          // console.log(res)
        })
        .catch(err => {
          // console.log(res)
        })
  },
  methods:{
    //返回按钮
    routerBack(){
      this.$router.go(-1)
    },
    //跳知网链接
    torouter(item,index){
        window.open('https://kns.cnki.net/kcms/detail/detail.aspx?dbcode=CAPJ&dbname='+item.tableName+'&filename='+item.fileName,'_blank')//
    },
  }
}
</script>

<style scoped>
.redTltle {
  /*width: 10rem;*/
  height: 1.15rem;
  background-color: #af2536;
  font-size: 0.453rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #ffffff;
  text-align: center;
  line-height: 1.15rem;
  margin-bottom: 0.3rem;
}
.top1box{
  width: 100%;
  height: 5.2rem;
  overflow: hidden;
}
.imgPeople{
  margin-top: 0.6rem;
  margin-left: 3.65rem;
  width: 2.68rem;
  height: 2.6rem;
  background-color: #af2536;
  border-radius: 1.333rem;
  /*overflow: hidden;*/
}
.peopleName{
  margin-top: 0.373rem;
  text-align: center;
  font-family: PingFang-SC-Heavy;
  font-size: 0.507rem;
  font-weight: bolder;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
}
.lion{
  width: 100%;
  height: 0.027rem;
  background-color: #000000;
  opacity: 0.1;
}
.top2{
  margin: 0 0.32rem;
}
.top2Title{
  font-family: PingFang-SC-Heavy;
  font-size: 0.373rem;
  font-weight: bolder;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  margin-top: 0.5rem;
}
.top2bottomText{
  font-family: PingFang-SC-Regular;
  font-size: 0.32rem;
  font-weight: normal;
  font-stretch: normal;
  /*line-height: 0.5rem;*/
  color: #5d5d5d;
  margin-top: 0.453rem;
  /*margin-bottom: 0.48rem;*/
}
.top2bottomText1{
  font-family: PingFang-SC-Regular;
  font-size: 0.2rem!important;
  font-weight: normal!important;
  font-stretch: normal!important;
  line-height: 0.5rem!important;
  color: #5d5d5d!important;
  margin-top: 0.453rem!important;
  /*margin-bottom: 0.48rem!important;*/
}
/*/deep/.top2bottomText1 > p{*/

/*  font-size: 0.2rem!important;*/

/*  !*margin-bottom: 0.48rem!important;*!*/
/*}*/
.top3{
  margin: 0 0.32rem;
  margin-bottom: 2rem;
}
.top3Title{
  font-family: PingFang-SC-Heavy;
  font-size: 0.373rem;
  font-weight: bolder;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  margin: 0.5rem 0;
}
.top3Text{
  font-family: PingFang-SC-Regular;
  font-size: 0.32rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0.6rem;
  letter-spacing: 0rem;
  color: #000000;
  opacity: 0.5;
  margin: 0.4rem 0;
}
</style>